<template>
  <div id="cate_id">
    <div class="cate_top">
      <div></div>
      <div class="cate_add">
        <el-button size="mini" round @click="isShow.flag = true"
          >增加</el-button
        >
      </div>
    </div>
    <el-table
      :data="cate_list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="分类id"> </el-table-column>
      <el-table-column prop="catename" label="分类名称"> </el-table-column>
      <el-table-column prop="img" label="分类图片" v-slot="$props">
        <template>
          <img
            class="pic"
            :src="static_host + $props.row.img"
            v-if="$props.row.pid != 0"
          />
        </template>
      </el-table-column>

      <el-table-column prop="status" label="分类状态" v-slot="$props">
        <template>
          <el-button
            type="success"
            size="mini"
            round
            v-if="$props.row.status === 1"
            >正常</el-button
          >
          <el-button
            type="danger"
            size="mini"
            round
            v-if="$props.row.status === 0"
            >禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="分类操作" v-slot="$props">
        <template>
          <el-button
            type="success"
            size="mini"
            round
            @click="updateCate($props.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            round
            @click="delCate($props.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <addCate
      ref="add_cate_ref"
      :isShow="isShow"
      :cate_list="cate_list"
      @reloadCate="reloadCate"
    ></addCate>
  </div>
</template>
<script>
import {mapActions,mapState} from 'vuex'
import addCate from '../components/addCate.vue'
export default {
  data(){
    return{
      isShow:{ flag : false },
    }
  },
  created(){
    this.CateAction()
  },
  methods:{
    delCate(id){
      var del_url = '/api/catedelete';
      this.$http.post(del_url,{id}).then(res=>{
        if(res.code===200){
          this.reloadCate()
        }
      })
    },
    updateCate(obj){
      this.isShow.flag=true
      this.$refs.add_cate_ref.setData(obj)
    },
    reloadCate(){
      this.CateAction()
    },
    ...mapActions('CateStore',['CateAction'])
  },
  computed:{
    ...mapState({'cate_list':state=>state.CateStore.cate_list})
  },
  components:{
    addCate,
  }
};
</script>

<style>
#cate_id .cate_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#cate_id .pic{
    width: 100px;
}
</style>